<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
  <div STYLE="background-color: #4CAF50;height: 457px" >
      <div style="width: 1500px;height: 50px; margin-left: 225px">
           <div class="container"> <img src="ico_1.png" width="225px"height="60px"style="margin-top: 40px" >
               <div style="float: right;font-size: 25px;margin-top: 30px">
          <ul style="list-style-type: none">
              <li style="float: left;display: block;padding: 15px"><a style="color: white" href="#" TARGET="_blank">API</a> </li>
              <li style="float: left;display: block;padding: 15px"><a style="color: white"href="#" target="_blank">博客</a> </li>
              <li style="float: left;display: block;padding: 15px"><a style="color: white"href="#"target="_blank">关于</a> </li>
          </ul>
               </div>

           </div>

      </div>
      <div class="container"style="margin-top: 70px;"> <center><div  class="width: 1140px;height: 70px;color: white;">
          <h1 style="font-size: 70px">BootCND</h1> <p>召唤师峡谷，属于你的世界</p>
      </center>
          </div>
      <form><div class="form-group"style="width: 60%;margin-top: 60px;margin-left: 400px ;">
          <input class="form-control search clearable" placeholder="搜索开源库，例如：jquery" style="height: 75px" >

      </div>
         </form>
      </div>
  </div>
<div class="container" style="background-color: #CCCCCC;width: 100%" ><ul style="list-style-type: none;margin-left: 300px">
    <li style="float: left;display: block;padding: 15px">
        <a href="/bootstrap/" title="Bootstrap" target="_blank" onclick="">
            <img src="angular-icon.svg" alt="bootstrap" width="60px"height="50px"></a>
    </li>
    <li style="float: left;display: block;padding: 15px">
        <a href="/react/" title="React" target="_blank" onclick="">
        <img src="backbone-icon.svg" alt="React"  width="60px"height="50px"></a>
    </li>
    <li style="float: left;display: block;padding: 15px">
        <a href="/jquery/" title="jQuery" target="_blank" onclick="">
            <img src="bootstrap.svg" alt="jquery"  width="60px"height="50px"></a>
    </li>
</ul>
</div>
<div class="container">
    <div style="margin-top: 40px">
    <a href="/react/" class="package list-group-item"target="_blank" >
        <div class="row">
            <div class="col-md-3"><h4 class="package-name">react</h4></div>
            <div class="col-md-9 hidden-xs"><p class="package-description">React 是用于构建用户界面的 JavaScript 工具库。</p>
            </div>
            <div class="package-extra-info col-md-9 col-md-offset-3 col-xs-12">
                <span><i class="fa fa-star"></i> 96958</span></div>
        </div></a>
        </div>
    <a href="/bootstrap/" class="package list-group-item" target="_blank" onclick="">
        <div class="row">
            <div class="col-md-3"><h4 class="package-name">bootstrap</h4></div>
        <div class="col-md-9 hidden-xs">
            <p class="package-description">Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
        </div><div class="package-extra-info col-md-9 col-md-offset-3 col-xs-12"><span><i class="fa fa-star"></i> 124952</span></div>
        </div></a>


</div>
</body>
</html>